<template>
	<el-dialog title="新增" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
		<el-form :model="form" :rules="rules" ref="form">
			<el-form-item label="风俗文化名" :label-width="formLabelWidth">
				<el-input v-model="form.moresName" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="封面" :label-width="formLabelWidth">
				<el-upload class="orders-img_el_upload" :action="upurl" :limit="3" list-type="picture-card"
					:on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove"
					:on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
					:class="{ disUoloadSty: noneBtnImg }" ref="upload">
					<span class="orders-img_el_upload_btn" @click.stop="submitUpload">添加图片</span>
				</el-upload>
			</el-form-item>
			<el-form-item label="分类" :label-width="formLabelWidth">
				<el-select v-model="form.classifyId" clearable placeholder="请选择">
				    <el-option
				      v-for="item in ClassiftData"
				      :key="item.id"
				      :label="item.classificationName"
				      :value="item.id">
				    </el-option>
				  </el-select>
			</el-form-item>
		<!-- 	<el-form-item label="所属地区" :label-width="formLabelWidth">
				<el-cascader v-model="value" :props="{ value: 'regionName', label: 'regionName'}" :options="options"
					clearable>
				</el-cascader>
			</el-form-item>
			<el-form-item label="详细地址" :label-width="formLabelWidth">
				<el-input v-model="form.detailedAddress" autocomplete="off"></el-input>
			</el-form-item> -->
			<el-form-item label="描述" :label-width="formLabelWidth">
				<div ref="editor"></div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cleardata">取 消</el-button>
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import MoresApi from "@/api/mores.js"
	import Editor from "wangeditor"
	export default {
		components: {},
		data() {
			return {
				editor: null,
				value: [],
				options: [],
				ClassiftData: [],
				ClassiftValue:'',
				dialogImageUrl: "",
				dialogVisible: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 3,
				upurl: "/api/file/upload/mores",
				fileList: [],
				imgurl: "",
				dialogFormVisible: false,
				form: {
					moresName: "",
					moresPicture: "",
					moresIntroduce: "",
					classifyId: "",
					district: "",
					detailedAddress: ""
				},
				formLabelWidth: '120px'
			};
		},
		methods: {
			createEditor() {
				this.$nextTick(() => {
					this.editor = new Editor(this.$refs.editor)
					this.editor.config.uploadImgServer = "api/file/editUpload/mores"
					this.editor.config.uploadFileName = "file"
					this.editor.config.uploadVideoServer = 'api/file/editUpload/mores'
					this.editor.config.uploadVideoName = "file"
					this.editor.create()
				})
			},
			handleError(err, file, fileList) {
				this.$message({
					message: "上传失败！",
					type: "success",
				});
				console.log(err);
			},
			handleSuccess(response, file, fileList) {
				if (file.response.flag == true) {
					this.fileList = fileList;
					this.form.moresPicture = file.response.data;
					if (fileList.length >= 3) {
						this.uploadDisabled = true;
					}
					alert(file.response.message);
				} else {
					alert(file.response.data);
				}
			},
			handleChange(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
			},
			handleRemove(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
				this.fileList.pop();
				this.uploadDisabled = false;
			},
			handlePreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			cleardata() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
				this.editor.destroy();
				this.value = [];
				this.editor = null;
			},
			handleDialogClose() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
				this.editor.destroy();
				this.value = [];
				this.editor = null;
			},
			async AddMores() {
				let content = this.editor.txt.html();
				const res = await MoresApi.AddMores("/znMores/addMores", {
					moresName: this.form.moresName,
					moresPicture: this.form.moresPicture,
					moresIntroduce: content,
					classifyId:this.ClassiftValue,
					district: this.value.join(','),
					detailedAddress: this.form.detailedAddress
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("添加成功");
					this.$parent.SearchMoresAll();
				}
			},
			submitForm(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						this.AddMores();
						this.$refs.form.resetFields();
						this.value = [];
						this.editor.destroy();
						this.editor = null;
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		},
	};
</script>

<style>
</style>